<template>
  <div>
    <el-table :data="isup?upData:pageData" stripe border>
      <el-table-column label="照片" width="100px">
        <template slot-scope="scope">
          <img :src=scope.row.url alt="这是图片" style="width: 80px;height: 80px;" @click="show(list,scope.$index)">
        </template>
      </el-table-column>
      <el-table-column prop="name" label="图片名"></el-table-column>
      <el-table-column prop="size" label="大小"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="up(scope.$index)">置顶</el-button>
          <el-button size="mini" @click="delImg(scope.$index)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 缩略图 -->
    <div>
      <el-dialog  :visible.sync="dialogVisible" :before-close="handleClose" width='30%'>
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>
    <!-- 分页 -->
    <div>
      <el-pagination 
      background 
      layout="prev, pager, next" 
      @current-change="currentPage" 
      :total="totalPage">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],//全部数据
      pageData: [],//当前页码表格数据
      upData: [],//置顶数据
      pageNo: 1,//表格页码
      pageCount: 5,//数据数
      currentNo: 1,//当前页码
      totalPage: 1,//总页码
      dialogVisible: false,
      dialogImageUrl: '',
      isup: false,
    };
  },
  methods: {
    // 显示缩略图
    show(file,index){
      this.dialogVisible = true;
      console.log(file[index]);
      this.dialogImageUrl = file[index].url;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    // 删除照片
    async delImg(index) {
      await this.$axios.post("/delimg", {
        url: this.list[index].url,
        id: this.list[index].id
      }).then(res => {
        if (res.data.code = 200) {
          alert('删除成功')
        }
        else {
          console.log('删除失败!!');
        };
      })
    },
    // 分页
    //获取前5条数据
    async getData(index) {
      this.pageNo = index || this.pageNo
      await this.$axios.post('http://localhost:3000/imgpage',
        {
          page: this.pageNo,
          pageSize: this.pageCount
        }).then(res => {
          // console.log(res);
          if (res.data.code = 200) {
            // console.log(1);
            console.log(res.data);
            // alert("获取分页数据成功")
            this.pageData = res.data.List.map(item=>{
            return{...item,url:`http://localhost:3000/getimage/${item.name}`}
          })
          // this.upData = res.data.List.map(item=>{
          //   return{...item,url:`http://localhost:3000/getimage/${item.name}`}
          // })
          }else{
            // alert("获取分页数据失败")
          }

        }).catch(error => {
          console.log(error);
        })
    },
    //当前页数据
    currentPage(val) {
      this.currentNo = val;
      console.log(this.currentNo)
      this.getData(this.currentNo)
    },
    //获取总页数
    async getPageTotal() {
      await this.$axios.post("/getimage")
        .then(res => {
          // console.log(res.data.List);
          this.list = res.data.List.map(item=>{
            return{...item,url:`http://localhost:3000/getimage/${item.name}`}
          })
          this.totalPage = Math.ceil(this.list.length / this.pageCount) * 10;
          // console.log(this.totalPage);
        }).catch(error => {
          console.log(error)
        })
    },
    // 置顶
    async up(index) {
      this.isup = !this.isup;
      await this.$axios.post('http://localhost:3000/upimg',
        {
          id: this.list[index].id,
          page: this.pageNo,
          pageSize: this.pageCount
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code = 200) {
            this.upData = res.data.List.map(item=>{
            return{...item,url:`http://localhost:3000/getimage/${item.name}`}
          })
          } else {
            alert("置顶失败")
          }

        })
        .catch(err => {
          console.log('操作失败' + err);
        })
    },

  },
  mounted() {
    this.getData();
    this.getPageTotal();
  }
}
</script>
  